<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>ValuePicker on SimpleDialog</title>

	<script type="text/javascript" src="../../../../../dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','ValuePicker']"></script>
	<script type="text/javascript" src="../../../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true"></script>

	<script type="text/javascript">
		require([
		    "doh/runner",
			"dojo/date/locale",
			"dojo/dom",
			"dojo/ready",
			"dijit/registry",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/ValuePickerTimePicker"
		], function(runner, locale, dom, ready, registry){
				onTimeChanged = function(){
					var d = registry.byId("picker2").get("date");
					if(d){
						dom.byId("changedValue").innerHTML =
							locale.format(d, {timePattern:"h:mm a",selector:"time"});
					}
				};
				
				ready(function(){
					var picker = registry.byId("picker2");
					// Tests
					runner.register("dojox.mobile.test.doh.ValuePickerTimePickerTests", [
       					{
       						name: "Verify ticket #16740 is fixed",
       						timeout: 4000,
       						runTest: function(){
       							// Initialize the value of the time picker
       							picker.set("values", ["22", "10"]);
       							var d = new runner.Deferred();
       							setTimeout(function(){
   									runner.assertEqual("10:10 PM", dom.byId("changedValue").innerHTML);
       								picker.onBtnClick();
       								setTimeout(d.getTestCallback(function(){
       									runner.assertEqual("10:10 AM", dom.byId("changedValue").innerHTML);
         								}), 1000);
       							}, 1000);
       							return d;
       						}
       					}
       				]);
                                				
   				runner.run();
				});
			});

	</script>

</head>
<body style="visibility:hidden;">
	<div id="view" data-dojo-type="dojox.mobile.View">
		<div id="picker2" data-dojo-type="dojox.mobile.ValuePickerTimePicker" data-dojo-props="is24h:false,onValueChanged:onTimeChanged"></div>
		<div id="changedValue"></div>
	</div>
</body>
</html>
